<template>
  <div>
    <!--  <p>------ wangeditor编辑器 ------</p>
    <div id="wangeditor1"></div>
    <el-button @click="clear" type="primary" style="margin: 40px 0">清空</el-button>
    <div id="wangeditor2" class="toolbar"></div>
    <p>------ 我是分割线 ------</p>
    <div id="wangeditor3" class="text"></div> -->

    <p>------ vue2-editor编辑器 ------</p>
    <vue-editor useCustomImageHandler :editorOptions="editorSettings" @image-added="handleImageAdded" :customModules="customModulesForEditor" v-model="content"> </vue-editor>
  </div>
</template>

<script>
// import E from "wangeditor";
import { VueEditor } from "vue2-editor";

//引入后还需要在vue.config.js配置
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
import axios from "axios"
export default {
  components: { VueEditor },
  data() {
    return {
      editor: {},
      content: "<h1>Initial Content</h1>",
      editorSettings: {
        modules: {
          imageDrop: true,//图片拖入
          imageResize: {}//图片缩放
        }
      },
      customModulesForEditor: [
        { alias: "imageDrop", module: ImageDrop },
        { alias: "imageResize", module: ImageResize }
      ],

    };
  },
  mounted() {
    // this.createWangeditor();
  },
  methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("file", file);

      axios({
        url: "/test/admin/guest/file/uploadChatFile?creatorId=1002&customerId=1002",
        method: "POST",
        data: formData,
      })
        .then(result => {
          let url = result.data.data.path; // Get url from response
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    },
    handlePaste(evt) {
      if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
        this.readFiles(evt.clipboardData.items, dataUrl => {
          const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
          if (userAgent.indexOf('Firefox') > -1) {
            const selection = this.quill.getSelection();
            if (selection) {
            } else {
              setTimeout(() => this.insert(dataUrl), 0);
            }
          } else {
            setTimeout(() => this.insert(dataUrl), 0);
          }
        });
      }
    },
    createWangeditor() {
      /* 第一个编辑器 */
      this.editor = new E("#wangeditor1");
      //   console.log(this.editor);
      //   this.editor.config.height = 200;
      //   this.editor.config.zIndex = 500;
      //   this.editor.config.focus = false;
      //   this.editor.config.placeholder = "自定义 placeholder 提示文字";
      this.editor.config.onchange = (html) => {
        console.log(html);
        // console.log(this.editor.txt.html());
        // console.log(this.editor.txt.text());
        // console.log(this.editor.txt.getJSON());
      };
      //   this.editor.con
      this.editor.colors = ["#339999", "#339999"]; //无效
      const SINA_URL_PATH =
        "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/";
      // 微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴',
      this.editor.config.emotions = [
        {
          title: "微信", // tab 的标题
          type: "image", // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
          content: [
            {
              alt: "[坏笑]",
              src: `${SINA_URL_PATH}/3.gif`,
            },
            { alt: "[舔屏]", src: `${SINA_URL_PATH}/1.gif` },
            { alt: "[污]", src: `${SINA_URL_PATH}/2.gif` },
          ],
        },
        {
          title: "emoji", // tab 的标题
          type: "emoji", // 'emoji' / 'image'
          // emoji 表情，content 是一个数组即可
          content: "😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐".split(
            /\s/
          ),
        },
      ];

      //   this.editor.config.menus = ["bold", "head", "link", "italic", "underline"];// 配置菜单栏，删减菜单，调整顺序
      this.editor.create();
      //   this.editor.txt.html("<p>用 JS 设置的内容</p>"); // 重新设置编辑器内容

      /* 第二个编辑器，并且tab和content分离 */
      const editor2 = new E("#wangeditor2", "#wangeditor3");

      editor2.create();
    },
    clear() {
      this.editor.txt.clear();
    },
  },
};
</script>

<style lang="scss" scoped>
.toolbar {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  height: 200px;
}
</style>